<template>
    <div class="table_container_component" :id="containerId">
        <slot v-if="render" :containerHeight="height" :containerWidth="width"></slot>
    </div>
</template>

<script lang="jsx" setup>
    import { debounce } from '@/utils/functions'
    import { ref, onMounted } from 'vue'

    const props = defineProps({
        // 手动计算高度
        manualSalc: {
            type: Boolean,
            default: false
        },
        summary: {
            type: Boolean,
            default: false
        }
    })

    const containerId = ref('table_container' + Math.random().toString(32))
    const render = ref(true)
    const width = ref(50)
    const height = ref(50)

    onMounted(() => {
        if(!props.manualSalc) {
            setTimeout(() => {
                calc()
                window.addEventListener('resize', debounce(() => {
                    calc()
                }, 200))
                // 创建一个新的 ResizeObserver 对象
                const observer = new ResizeObserver(entries => {
                    // entries 参数包含了发生改变的元素信息
                    for (let entry of entries) {
                        const target = entry.target; // 获取被观测的目标元素
                        calc()
                        // console.log(`${target} 的宽度为 ${entry.contentRect.width}`);
                        // console.log(`${target} 的高度为 ${entry.contentRect.height}`);
                    }
                });
                observer.observe(document.getElementById(containerId.value));
            }, 50)
        }

    })

    function calc() {
        let container = document.getElementById(containerId.value)
        if(container) {
            let tableHead = container.getElementsByClassName('ant-table-thead')[0]
            let tableHeadHeight = 45
            if(tableHead && tableHead.offsetHeight) {
                tableHeadHeight = tableHead.offsetHeight + 3
            }
            if(container.offsetWidth > 0) {
                width.value = (container.offsetWidth - 10) + 'px'
            }
            if(container.offsetHeight > 0) {
                // 减掉表头的40个像素，再冗余5个像素
                height.value = container.offsetHeight - tableHeadHeight
            }
        }
        // render.value = true
    }
</script>

<style lang="less" scoped>
.table_container_component{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

</style>
